<template>
  <div>
    <van-nav-bar title="频道管理" left-arrow @click-left="$router.back()" />
    <div class="del">
      <h4>点击删除频道</h4>
      <div class="tabList">
        <span
          class="tab"
          v-for="(item, index) in list"
          :key="index"
          @click="tabFn(index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="add">
      <h4>点击添加频道</h4>
      <div class="tabList">
        <span
          class="tab"
          v-for="(obj, index) in addList"
          :key="index"
          @click="addTab(index)"
          >{{ obj.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
//引入接口
import { category } from "../api/news";
export default {
  data() {
    return {
      list: [], //原本拥有的数据
      addList: [], //被删除的数据
    };
  },
  created() {
    // this.getList();
    // console.log(this.list);
    //获取本地存储中的addList和list数据
    this.addList = JSON.parse(localStorage.getItem("addList")) || [];
    this.list = JSON.parse(localStorage.getItem("list")) || [];
    //若本地存储中数据数量>0则使用本地存储的数据，否则使用接口渲染的数据
    if (this.list.length > 0 || this.addList.length > 0) {
    } else {
      this.getList();
    }
    console.log(this.list);
  },
  methods: {
    getList() {
      //调用栏目列表接口也
      category().then((res) => {
        // console.log(res);
        //将数据赋值到list
        this.list = res.data.data;
        // console.log(this.list);
      });
    },
    tabFn(index) {
      //根据索引点击《点击删除频道》下的每个数据
      // console.log(index);
      // console.log(this.list);
      //点击数据，添加到addList
      this.addList.push(this.list[index]);
      // console.log(this.addList);
      //删除list里面的那个数据
      this.list.splice(index, 1);
      //本地存储list和addList
      localStorage.setItem("list", JSON.stringify(this.list));
      localStorage.setItem("addList", JSON.stringify(this.addList));
      // console.log(this.list);
    },
    addTab(index) {
      //根据索引点击《点击添加频道》下的每个数据
      // console.log(index);
      //点击数据，添加到list
      this.list.push(this.addList[index]);
      //删除addList对应的一个数据
      this.addList.splice(index, 1);
      //重新本地存储list和addList
      localStorage.setItem("list", JSON.stringify(this.list));
      localStorage.setItem("addList", JSON.stringify(this.addList));
      // console.log(this.list);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__left {
  .van-icon-arrow-left {
    color: #000;
  }
}
.del {
  margin-top: 20px;

  h4 {
    text-indent: 1em;
    font-weight: 900;
  }
  .tabList {
    margin: 40px;
    display: flex;
    flex-wrap: wrap;
    .tab {
      margin-right: 10px;
      border: 1px solid #ddd;
      padding: 10px;
      margin-top: 10px;
    }
  }
}
.add {
  margin-top: 20px;
  h4 {
    text-indent: 1em;
    font-weight: 900;
  }
  .tabList {
    margin: 40px;
    display: flex;
    flex-wrap: wrap;
    .tab {
      margin-right: 10px;
      border: 1px solid #ddd;
      padding: 10px;
      margin-top: 10px;
    }
  }
}
</style>